import React from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { Card } from 'antd';
export default () => {

    const uninstalledList = [
        { title: "城市站点管理", "desc": "城市站点管理", url: "http://uniapp.b2b2c.niuteam.cn/public/static/img/cache/template.png" },
        { title: "客服功能", "desc": "客服", url: "http://uniapp.b2b2c.niuteam.cn/addon/customer/icon.png" },
        { title: "会员登录", "desc": "会员登录后奖励设置", url: "http://uniapp.b2b2c.niuteam.cn/addon/memberlogin/icon.png" },
        { title: "会员充值", "desc": "会员充值设置", url: "http://uniapp.b2b2c.niuteam.cn/addon/memberrecharge/icon.png" },
        { title: "积分兑换", "desc": "积分兑换礼品，优惠券，红包", url: "http://uniapp.b2b2c.niuteam.cn/addon/pointexchange/icon.png" },
        { title: "门店管理", "desc": "门店管理功能", url: "http://uniapp.b2b2c.niuteam.cn/public/static/img/cache/data_table.png" },
    ];

    const installedList: any[] = [
        { title: "支付宝支付", "desc": "支付宝支付功能", url: "http://uniapp.b2b2c.niuteam.cn/addon/alipay/icon.png" },
        { title: "组合套餐", "desc": "组合套餐活动功能", url: "http://uniapp.b2b2c.niuteam.cn/addon/bundling/icon.png" },
        { title: "优惠券", "desc": "会员优惠券功能", url: "http://uniapp.b2b2c.niuteam.cn/addon/coupon/icon.png" },
        { title: "限时折扣", "desc": "限时折扣功能", url: "http://uniapp.b2b2c.niuteam.cn/addon/discount/icon.png" },
        { title: "满减活动", "desc": "满减送活动", url: "http://uniapp.b2b2c.niuteam.cn/addon/manjian/icon.png" },
        { title: "会员消费", "desc": "会员消费后奖励设置", url: "http://uniapp.b2b2c.niuteam.cn/addon/memberconsume/icon.png" },
        { title: "会员推荐", "desc": "会员推荐奖励设置", url: "http://uniapp.b2b2c.niuteam.cn/addon/memberrecommend/icon.png" },
        { title: "会员注册", "desc": "会员注册奖励设置", url: "http://uniapp.b2b2c.niuteam.cn/addon/memberregister/icon.png" },
        { title: "会员签到", "desc": "会员签到奖励设置", url: "http://uniapp.b2b2c.niuteam.cn/addon/membersignin/icon.png" },
        { title: "微信小程序", "desc": "微信小程序功能", url: "http://uniapp.b2b2c.niuteam.cn/addon/weapp/icon.png" },
        { title: "微信支付", "desc": "微信支付功能", url: "http://uniapp.b2b2c.niuteam.cn/addon/wechatpay/icon.png" },
        { title: "分销", "desc": "分销", url: "http://uniapp.b2b2c.niuteam.cn/addon/fenxiao/icon.png" },
        { title: "团购", "desc": "团购管理活动", url: "http://uniapp.b2b2c.niuteam.cn/addon/groupbuy/icon.png" },
        { title: "礼品管理", "desc": "礼品管理活动", url: "http://uniapp.b2b2c.niuteam.cn/addon/gift/icon.png" },
        { title: "阿里云OSS", "desc": "阿里云OSS", url: "http://uniapp.b2b2c.niuteam.cn/addon/alioss/icon.png" },
        { title: "阿里云短信", "desc": "阿里云短信功能", url: "http://uniapp.b2b2c.niuteam.cn/addon/alisms/icon.png" },
        { title: "限时秒杀", "desc": "限时秒杀功能", url: "http://uniapp.b2b2c.niuteam.cn/addon/seckill/icon.png" },
        { title: "专题活动", "desc": "专题活动功能", url: "http://uniapp.b2b2c.niuteam.cn/addon/topic/icon.png" },
        { title: "拼团", "desc": "拼团管理活动", url: "http://uniapp.b2b2c.niuteam.cn/addon/pintuan/icon.png" },
        { title: "七牛云上传", "desc": "七牛云上传功能", url: "http://uniapp.b2b2c.niuteam.cn/addon/qiniu/icon.png" },
        { title: "微信公众号", "desc": "微信公众号功能", url: "http://uniapp.b2b2c.niuteam.cn/addon/wechat/icon.png" },
    ];
    return (
        <PageHeaderWrapper title={false}>
            <Card>
                <nav style={{ borderLeft: "4px solid #4685FD", paddingLeft: "10px", marginBottom: "28px", fontWeight: 600, fontSize: "16px" }}>未安装插件</nav>
                <ul style={{ margin: 0, padding: 0, display: "flex", flexWrap: "wrap" }}>
                    {
                        uninstalledList.map((item: any, inx: number) => <li key={inx} style={{ width: "20%", paddingRight: "20px", marginBottom: "20px" }}>
                            <div style={{ backgroundColor: "#F2F3F5", display: "flex", padding: "15px", justifyContent: "space-between", alignItems: "center" }} onMouseOver={() => {
                                console.log(123)
                            }}>
                                <div style={{ display: "flex" }}>
                                    <img src={item.url} alt="" style={{ width: "40px" }} />
                                    <div style={{ paddingLeft: "10px" }}>
                                        <span>{item.title}</span>
                                        <div style={{ fontSize: "12px", color: "#999" }}>{item.desc}</div>
                                    </div>
                                </div>
                            </div>
                            <div style={{
                                display: "flex", justifyContent: "space-between",
                                alignItems: "center", padding: "5px 10px", fontSize: "12px",
                                backgroundColor: "#F2F3F5", borderTop: "1px solid #e5e5e5"
                            }}>
                                <div style={{ display: "flex", alignItems: "center" }}>
                                    <div style={{ width: "8px", height: "8px", borderRadius: "50%", backgroundColor: "red", marginRight: "10px" }} />
                                    <span>未安装</span>
                                </div>
                                <span>安装</span>
                            </div>
                        </li>)
                    }
                </ul>
                <nav style={{ borderLeft: "4px solid #4685FD", paddingLeft: "10px", margin: "28px 0", fontWeight: 600, fontSize: "16px" }}>已安装插件</nav>
                <ul style={{ margin: 0, padding: 0, display: "flex", flexWrap: "wrap" }}>
                    {
                        installedList.map((item: any, inx: number) => <li key={inx} style={{ width: "20%", paddingRight: "20px", marginBottom: "20px" }}>
                            <div style={{ backgroundColor: "#F2F3F5", display: "flex", padding: "15px", justifyContent: "space-between", alignItems: "center" }}>
                                <div style={{ display: "flex" }}>
                                    <img src={item.url} alt="" style={{ width: "40px" }} />
                                    <div style={{ paddingLeft: "10px" }}>
                                        <span>{item.title}</span>
                                        <div style={{ fontSize: "12px", color: "#999" }}>{item.desc}</div>
                                    </div>
                                </div>
                            </div>
                            <div style={{
                                display: "flex", justifyContent: "space-between",
                                alignItems: "center", padding: "5px 10px", fontSize: "12px",
                                backgroundColor: "#F2F3F5", borderTop: "1px solid #e5e5e5"
                            }}>
                                <div style={{ display: "flex", alignItems: "center" }}>
                                    <div style={{ width: "8px", height: "8px", borderRadius: "50%", backgroundColor: "green", marginRight: "10px" }} />
                                    <span>已安装</span>
                                </div>
                                <span>卸载</span>
                            </div>
                        </li>)
                    }
                </ul>
            </Card>
        </PageHeaderWrapper>
    )
}